<template>
  <div class="main">
    <el-card shadow="never" class="content-wrap">
      <Header></Header>
    </el-card>
    <div>
      <div class="languageBox">
        <div class="radioBox" @click="handleClick(0, $event)">
          <div style="font-size: 20px;">通用场景文字识别</div>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="办公文档识别" />
            <el-radio-button label="网络图片文字识别" />
            <el-radio-button label="手写文字识别" />
            <el-radio-button label="表格文字识别" />
            <el-radio-button label="印章识别" />
            <el-radio-button label="二维码识别" />
          </el-radio-group>
        </div>
        <div class="radioBox" @click="handleClick(100, $event)">
          <div style="font-size: 20px;">卡证文字识别</div>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="身份证识别" />
            <el-radio-button label="银行卡识别" />
            <el-radio-button label="营业执照识别" />
            <el-radio-button label="名片识别" />
            <el-radio-button label="护照识别" />
            <el-radio-button label="社保卡识别" />
            <el-radio-button label="户口本识别" />
            <el-radio-button label="出生医学证明识别" />
            <el-radio-button label="企业工商信息识别" />
            <el-radio-button label="港澳台证件识别" />
            <el-radio-button label="结婚证识别" />
          </el-radio-group>
        </div>
        <div class="radioBox" @click="handleClick(100, $event)">
          <div style="font-size: 20px;">交通场景文字识别</div>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="行驶证识别" />
            <el-radio-button label="驾驶证识别" />
            <el-radio-button label="车牌识别" />
            <el-radio-button label="VIN码识别" />
            <el-radio-button label="机动车销售发票识别" />
            <el-radio-button label="二手车销售发票识别" />
            <el-radio-button label="车辆合格证识别" />
            <el-radio-button label="机动车登记证书识别" />
            <el-radio-button label="快递面单识别" />
          </el-radio-group>
        </div>
        <div class="radioBox" @click="handleClick(100, $event)">
          <div style="font-size: 20px;">财务票据文字识别</div>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="智能财务票据识别" />
            <el-radio-button label="增值税发票识别" />
            <el-radio-button label="银行回单识别" />
            <el-radio-button label="定额发票识别" />
            <el-radio-button label="通用机打发票识别" />
            <el-radio-button label="火车票识别" />
            <el-radio-button label="出租车票识别" />
            <el-radio-button label="飞机行程单识别" />
            <el-radio-button label="汽车票识别" />
            <el-radio-button label="船票识别" />
            <el-radio-button label="通用票据识别" />
            <el-radio-button label="购物小票识别" />
          </el-radio-group>
        </div>
        <div class="radioBox" @click="handleClick(100, $event)">
          <div style="font-size: 20px;">医疗票据文字识别</div>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="医疗票据文字识别" />
            <el-radio-button label="医疗费用结算单识别" />
            <el-radio-button label="医疗检验报告单识别" />
            <el-radio-button label="医疗诊断报告单识别" />
            <el-radio-button label="病案首页识别" />
            <el-radio-button label="出院小结识别" />
            <el-radio-button label="入院小结识别" />
            <el-radio-button label="诊断证明识别" />
            <el-radio-button label="门诊病历识别" />
            <el-radio-button label="处方笺识别" />
            <el-radio-button label="手术记录识别" />
            <el-radio-button label="医疗票据类别检测" />
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="putBox">
      <div class="putVoiceBox">
        <div class="putVoice">
          <div class="preview">
            <div>图片预览</div>
            <div class="addmore" style="margin-left: 20px" @click="clearImg">
              <el-icon class="iconClear">
                <Delete />
              </el-icon>
              <div>清空</div>
            </div>
          </div>
          <div class="getImg" v-show="!imgSrc">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="h3">点击添加图片</div>
            <div class="h5">准确率最高97.5%·数据安全保护</div>
            <input id="input2" class="inputVoice" type="file" accept="image/*" @change="inputVoice($event)">
          </div>
          <div class="getImg" v-show="imgSrc">
            <img :src="imgSrc" alt="">
          </div>
          <div class="footerBtn">
            <div class="addmore" @click="handleIdentify">
              <el-icon class="iconClear">
                <Refresh />
              </el-icon>
              <div>识别</div>
            </div>
          </div>
        </div>
      </div>
      <div class="putVoiceBox">
        <div class="putVoice">
          <div class="preview">
            <div>识别结果</div>
          </div>
          <div class="getImg" :class="{ 'text-preview': textList.length }">
            <template v-if="textList.length">
              <p v-for="(item, index) in textList" :key="index">{{ item.words }}</p>
            </template>
            <span v-else>{{ recognitionText }}</span>
          </div>
          <div class="footerBtn">
            <div class="addmore" @click="download">
              <el-icon class="iconClear">
                <Download />
              </el-icon>
              <div>下载</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getImageOrTextIdentifyRes } from '@/api/identify'
import type { AxiosResponse } from 'axios'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
// import func from 'vue-temp/vue-editor-bridge'
const radio1 = ref()
const radio2 = ref()
const radio3 = ref()
const radio4 = ref()
const radio5 = ref()
const imgSrc: any = ref()
const recognitionText = ref('开放蓝天')
const textList = ref([])
const imgCode = ref(-1)
const fileData = reactive({
  data: null,
  name: ''
})

const handleClick = (code, event) => {
  const target = event.target;
  if (target.nodeName === 'INPUT') {
    imgCode.value = code;
    console.log(code);
  }
}

onMounted(() => {
  if (sessionStorage.getItem('them') === 'fff') {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#454653')
    document.documentElement.style.setProperty("--main-bg-color", '#22252a')
    document.documentElement.style.setProperty("--main-font-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont2-color", '#fff')
    document.documentElement.style.setProperty("--el-border-color", '#454653')
    document.documentElement.style.setProperty("--main-elbtn-color", '#454653')
  } else {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#f2f3f4')
    document.documentElement.style.setProperty("--main-bg-color", '#fff')
    document.documentElement.style.setProperty("--main-font-color", '#303133')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#d6d7d8')
    document.documentElement.style.setProperty("--main-shallowfont2-color", 'rgba(0, 0, 0, 0.46)')
    document.documentElement.style.setProperty("--el-border-color", '#dcdfe6')
    document.documentElement.style.setProperty("--main-elbtn-color", '#409eff')
  }
})

// 识别图片上传
const handleIdentify = () => {
  if (imgCode.value === -1) {
    ElMessage({
      message: '请选择你要识别的类型',
      type: 'error'
    })
    return;
  }

  if (!imgSrc.value) {
    ElMessage({
      message: '请选择你要上传的图片',
      type: 'error'
    })
    return;
  }

  const formData = new FormData();
  formData.append('file', fileData.data, fileData.name);
  formData.append('code', `${imgCode.value}`);

  getImageOrTextIdentifyRes(formData).then((res: any) => {
    if (!res.wordsResult.length) {
      ElMessage({
        message: '识别失败，请检查图片是否符合对应分类',
        type: 'error'
      })
      return
    }
    textList.value = res.wordsResult;
    console.log(res.wordsResult);
  })
}

// 选择文件提交
function inputVoice(e) {
  console.log('$event', e.target.files)
  const file = e.target.files[0];
  
  if (!file) return
  fileData.data = file;
  fileData.name = file.name;

  const reader = new FileReader();
  reader.readAsDataURL(file);
  //为文件读取成功设置事件
  reader.onload = function (val) {
    imgSrc.value = val.target.result
  };
  // let size = e.target.files[0].size/1024/1024
  // let fileObj = {
  //   name: e.target.files[0].name,
  //   size: size.toFixed(2),
  //   type: e.target.files[0].type.split('/')[0]
  // }
  // // console.log('fileObj',fileObj)
  // voiceList.value.push(fileObj)
  // (<HTMLInputElement>document.getElementById('input1')).value
  // (<HTMLInputElement>document.getElementById('input2')).value
}

function clearImg() {
  imgSrc.value = '';
  fileData.data = null;
  fileData.name = '';
  textList.value = [];
  (<HTMLInputElement>document.getElementById('input2')).value = ''
}

function download() {
  if (!textList.value.length) {
    ElMessage({
      message: '请先识别图片,再下载',
      type: 'error'
    })
    return;
  }

  textList.value.forEach(({ words }) => {
    recognitionText.value += `${words}\r`
  })

  let a = document.createElement('a')
  a.href = 'data:text/plain;charset=utf-8,' + recognitionText.value
  a.download = '识别结果'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
</script>

<style lang="scss" scoped>
  .main {
    min-height: 1500px;
    // padding: 20px;
    background-color: var(--main-shallowbg-color);
  }

  // .putBox {
  //   // width: 90%;
  //   // margin: 50px auto;
  //   // display: flex;
  //   // justify-content: space-around;
  // }
  .inputVoice {
    opacity: 0.0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
  }

  // .putVoice:hover {
  //   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
  // }
  .putVoiceBox {
    width: 90%;
    height: 420px;
    margin: 10px auto;

    .text-preview {
      overflow-y: auto;
      display: block;
      box-sizing: border-box;
      padding-left: 10px;
      padding-top: 10px;
      padding-bottom: 10px;

      p {
        margin: 0;
        line-height: 1.5;
      }
    }
  }

  .putVoice {
    position: relative;
    transition-property: all;
    transition-duration: 0.6s;
    width: 100%;
    height: 400px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    border-radius: 10px;
  }

  .preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
    width: 90%;
    margin: 0px auto;
    font-size: 15px;
  }

  .getImg {
    position: relative;
    transition-property: all;
    transition-duration: 0.6s;
    width: 90%;
    height: 75%;
    margin: 5px auto 0px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 4px dotted var(--main-shallowbg-color);

    img {
      width: 100%;
      height: 100%;
    }

    .icon {
      font-size: 60px;
      margin-top: -60px;
      margin-bottom: 20px;
      position: relative;
      top: 0px;
      animation-name: example;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
    }

    .h3 {
      font-size: 25px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .h5 {
      color: #969696;
    }
  }

  @keyframes example {
    from {
      top: 0;
    }

    to {
      top: 12px;
    }
  }

  .addmore {
    transition-property: all;
    transition-duration: 0.5s;
    width: 25%;
    height: 27px;
    border-radius: 10px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;

    .iconClear {
      font-size: 15px;
    }
  }

  .addmore:hover {
    box-shadow: 3px 3px 4px 1px var(--main-shallowfont-color);
  }

  .footerBtn {
    width: 90%;
    height: 10%;
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
  }

  .languageBox {
    background-color: var(--main-shallowbg-color);
    // width: 60%;
    // height: 400px;
    padding: 10px;
    color: var(--main-font-color);
  }

  .radioBox {
    margin-top: 10px;
  }

  ::v-deep .el-radio-group {
    margin: 10px;
  }

  ::v-deep .el-radio-button__inner {
    color: var(--main-font-color);
    background-color: var(--main-bg-color);
  }

  ::v-deep .el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: var(--main-bg-color);
    background-color: var(--main-font-color);
    border: var(--main-font-color);
    box-shadow: none;
  }

  @media screen and (min-width: 600px) {
    .main {
      min-height: 1500px;
      // padding: 20px;
      background-color: var(--main-shallowbg-color);
    }

    .putBox {
      width: 95%;
      margin: 0px auto;
      display: flex;
      justify-content: space-around;
    }

    .inputVoice {
      opacity: 0.0;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
    }

    // .putVoice:hover {
    //   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
    // }
    .putVoiceBox {
      width: 40%;
      // height: 400px;
      margin: 10px;
    }

    .putVoice {
      position: relative;
      transition-property: all;
      transition-duration: 0.6s;
      width: 100%;
      height: 400px;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;
      border-radius: 10px;
    }

    .preview {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 10%;
      width: 90%;
      margin: 0px auto;
      font-size: 17px;
    }

    .getImg {
      position: relative;
      transition-property: all;
      transition-duration: 0.6s;
      width: 90%;
      height: 76%;
      margin: 0px auto;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      border: 4px dotted var(--main-shallowbg-color);

      img {
        width: 100%;
        height: 100%;
      }

      .icon {
        font-size: 60px;
        margin-top: -60px;
        margin-bottom: 20px;
      }

      .h3 {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .h5 {
        color: #969696;
      }
    }

    .languageBox {
      background-color: var(--main-shallowbg-color);
      width: 90%;
      margin: 0px auto;
      // height: 400px;
      // padding: 30px 40px 30px 30px;
      color: var(--main-font-color);
    }

    .radioBox {
      margin: 10px;
    }

    .addmore {
      width: 18%;
      // height: 35px;
      padding: 1px 10px;
      border-radius: 10px;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .iconClear {
        font-size: 20px;
      }
    }

    .footerBtn {
      width: 90%;
      height: 10%;
      margin: 10px auto;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>